﻿/*!
 * Project: ПочиниОкна (версия 1.1)
 * Autor: Tomatys (http://tomatys.com)
 * Date: 11.09.2018
 */

body {margin: 0;font:normal 16px/1.5 'Montserrat';color:#2f2f3c;}
img{max-width:100%;height:auto;}

.color-list .white{
    height: 50px;
    width: 50px;
    background: white;
    display: inline-block;
    border: 3px solid #ccc;
    border-radius: 40px;
}
.color-list .brow{
    height: 50px;
    width: 50px;
    background: #613114;
    display: inline-block;
    border: 3px solid #ccc;
    border-radius: 40px;
}
.color-list .all{
    height: 50px;
    width: 50px;
    background: linear-gradient(to right, orange , yellow, green, cyan, blue, violet);
    display: inline-block;
    border: 3px solid #ccc;
    border-radius: 40px;
}
.color-list a.active{
    text-decoration: underline;
}
.color-list a.active i{
    border-color: #005cbf;
}


a h2, a h3, a h4,a .h2,a .h3,a .h4,a.h2,a.h3,a.h4{color:#2f2f3c;}
.b-link,a.b-link{text-decoration:none;margin-bottom:0px;line-height: 1.1;display: inline-block;}
.b-link:hover,a.b-link:hover{border-bottom: 1px solid #97979d;border-bottom: 1px solid rgba(47,47,60,0.7);text-decoration: none;margin-bottom:-1px;}
.b-link p{margin-bottom:0;}
.t-none{text-decoration:none;color: #2f2f3c!important;}
font.tablebodytext{display:none!important;}
h1,h2,h3,h4,.bold,.strong,strong,b{font-weight:600;}
h1,h2,.h2{font-size:42px;margin-top: 80px;margin-bottom: 34px;}
h3,.h3{font-size:26px;}  
h4,.h4{font-size:18px;}
.title{margin: 0;font-weight: 600;}
small,.small{font-size:16px;}
.grey{color:#97979d;}
.radius-img{border-radius:4px;overflow:hidden;}

.table{margin-bottom: 36px;}
.table thead{background: #f4f5f7;}
.table th, .table td {border-top: 1px solid #d5d5d8;}

p{margin-bottom: 27px;}
h1+p,.h1+p,h2+p,.h2+p,h2+.p-text,.h2+.p-text{margin-top:34px;}

/* Colors */
.btn-orange{color: #fff;border: 1px solid #ff6900;background-color: #ff6900;display: inline-block;padding: 0 30px;line-height: 50px;font-size: 18px;font-weight: 500;border-radius: 4px;}


.grey-color{color:#666;}
.green{color:#34cd66;}
.blue{color:#2e9cf7;}
.yellow{color:#f4d103;}

/* lego */
nav ul{padding: 0;}
.col-five{width:20%;padding:0 15px;position: relative;min-height: 1px;-ms-flex: 0 0 50%;flex: 0 0 20%;max-width: 20%;}



[class*="icon-"]{display:block;background:url(../img/sprite.png) no-repeat;}
.icon-shield{background-position:-91px 0;}
.icon-sale{background-position:-183px 0;}
.icon-delivery{background-position:-273px 0;}
.icon-pay{background-position:-363px 0;}

.clear{clear:both;}

/* HEADER */
header{height:107px;overflow: hidden;position: relative;}

header .logo{float: left;position: absolute;}
header .logo:hover{opacity:0.75}
header .logo a{text-decoration:none;}
header .logo p{font-size: 26px;font-weight: 600;color: #000;margin: 21px 0 -3px;}
header .logo span{color: #2f2f3c;}

header #nav{width: 100%;text-align: center;}
header #nav ul{display: inline-block;}
header #nav li{float: left;display: inline-block;}
header #nav li a{color:#2f2f3c;line-height:107px;padding:0 15px;display: inline-block;border-top: 4px solid #fff;font-weight:500;font-size:18px;}
header #nav li a:hover{border-top: 4px solid #ff6900;color:#ff6900;text-decoration:none;}


header .phones{position: absolute;top: 0;right: 0;text-align: right;}
header .phone{font-size: 21px;font-weight: 600;margin: 0;margin-top: 24px;}
header .callback{font-size: 18px;font-weight: 500;}
header .callback span{border-bottom: 1px solid;display: inline-block;line-height: 18px;}
header .callback:hover{color:#ff6900;cursor:pointer;}

#head{border-top: 1px solid #f0f0f0;}
#head h1{margin:1px 0 33px;}
#breadcrumb{margin: 28px 0 0;}
.breadcrumb-item{display:inline-block;}
.breadcrumb-item-link span{border-bottom: 1px solid;}

/* SLIDERS */
#home-hero{background:#ccc;}
#home-hero img{width:100%;height:auto;}
#home-hero .container{position:relative;}
.freedom{height: 23px;position: absolute;top: 50%;width: 100%;}


.next-1,.prev-1,.next-2,.prev-2,.next-3,.prev-3{background: url(../img/sprite.png) no-repeat;z-index: 999;position: absolute;cursor:pointer;}
.next-1:hover,.prev-1:hover{opacity: 1;}
.next-2:hover,.prev-2:hover,.next-3:hover,.prev-3:hover{opacity:0.75;}

.next-1,.prev-1{width: 26px;height: 46px;top: 50%;margin-top:-23px;opacity:0.5;}
.next-1{left:0;background-position: -60px -90px;}
.prev-1{right:0;background-position: -86px -90px;}

#slider-reviews{margin-bottom:60px;}
.one-review{background: #F9F9F9;padding-left:30px;border-radius:4px;overflow:hidden;}
.review-text{width:55%;float:left;}
.review-img{width:45%;float:left;}

#slider-works,#slider-reviews{position: relative;}
.next-2,.prev-2,.next-3,.prev-3{width: 18px;height: 32px;top: 8px;}
.prev-2,.prev-3{right:0;background-position: -129px -90px;}
.next-2,.next-3{right:28px;background-position: -111px -90px;}

/* HOME PAGE */
.products h1{margin: 76px 0 30px;}
.products a,.products a:hover{text-decoration:none;}
.products h3{font-size:18px;font-weight:600;padding: 14px 0 0;}
.products h3 span{border-bottom:1px solid;line-height: 16px;display: inline-block;}
.products p{margin-bottom: 6px;}
.products b{display: inline-block;margin-bottom: 23px;}

#perfects [class*="icon-"]{width:90px;height:90px;}
#perfects b{width: 100%;display: inline-block;padding: 17px 0 0;font-size: 18px;}

#config{margin: 88px 0 0;font-size: 18px;}
#config h2{margin: 33px 0 31px;}
#config h4{font-weight:400;margin-bottom: 5px;}
#config .size-bx{width:200px;float: left;margin-bottom: 20px;}
#config .size-bx input{width:200px;height:50px;border-radius:4px;text-align: center;background: #F1F1F1;border:1px solid #E2E2E2;}
#config .size-bx label{margin-bottom: 2px;}
#config .canc_types{clear: both;}
#config .size-x{float: left;padding: 41px 10px 0;color:#999;}

#config select{width:270px;height:50px;background: #F1F1F1;border:1px solid #E2E2E2;margin-bottom: 20px;}

#config .white, #config .brown{width: 40px;height: 40px;background: #fff;border-radius: 50%;border: 2px solid #E2E2E2;float: left;margin: 0 10px 0 0;}
#config .brown{background: brown;}
#config p.active{border-color: #ff6900;}
#config .other{border-bottom: 1px dashed;display: inline-block;line-height: 16px;padding: 14px 0 0;color: #666;margin-bottom: 26px;}
#config .other:hover{color: #ff6900;}
#config .canc_colors p:hover{border-color: #ff6900;cursor:pointer;}
.price {margin-bottom: 22px;}
.price span{font-weight:500;}

.about p{margin-bottom: 29px;}

.review-text .time{padding-top: 32px;color: #999;margin-bottom: 0;}
.review-text .autor{font-weight: 600;border-bottom: 1px solid;display: inline-block;line-height: 18px;font-size: 18px;margin-bottom: 20px;}
.review-text .more{color: #2f2f3c;margin: -10px 0 30px;border: 1px solid;background: transparent;padding: 0 30px;height: 50px;line-height: 50px;display: inline-block;border-radius: 4px;bottom: 30px;/*position: absolute;*/}
.review-text .more:hover{opacity: 0.75;}
.review-text .review{max-height: 172px;overflow: hidden;padding-right: 15px;}


/* PAGE */
#page-content{min-height:500px;padding-bottom: 55px;}

.box-1 h3{margin: 24px 0 8px;}
.box-1 .box-text{padding-bottom:14px;}
.box-1 .b-price{margin-top: -33px;font-weight: 500;}

.hidden{display: none;}
.price-item{font-weight: 500;}
.link{text-decoration:underline;}

/* FOOTER */
#footer{margin-top:41px;}
#footer b{display: inline-block;font-size: 18px;line-height: 1.2;padding-bottom: 14px;}
#footer h4{padding: 7px 0;}
#footer h4+p{padding-top: 3px;}
#footer ul{margin-bottom:32px;}
#footer ul li{display: inline-block;
    margin: 0 0 6px;
    width: 100%;
    padding: 0;
}
.links a {
    font-size: 16px;
    color: #2f2f3c;
    margin-right: 12px;
    line-height: 30px;
    text-decoration: none;
    display: inline-block;
}
.links a span {
    line-height: 1.1;
    border-bottom: 1px solid #97979d;
    border-bottom: 1px solid rgba(47,47,60,0.7);
}

.perfect-item .col-md-4{margin-bottom: 39px;}
.perfect-item .number-bx{    display: table-cell;
    vertical-align: middle;
    padding-right: 20px;
    font-size: 48px;
    line-height: 54px;
    font-weight: 600;
    color: #ff214f;
    letter-spacing: -1px;}
.perfect-item .descr-bx{line-height: 22px;
    font-size: 18px;
    display: table-cell;
    vertical-align: middle;}
.perfect-item .bottom-bx{margin-top: 15px;color: #6f6f6f;}

#footer a{color:#2f2f3c;}

footer .bottom{background: #F9F9F9;height:60px;line-height: 60px;}
footer .bottom p{margin:0;}
footer .bottom a{text-decoration:underline;}
footer .bottom .copy{float:left;width:50%;}
footer .bottom .autor{float:right;width:50%;text-align: right;position: relative;padding-right:77px;}
footer #tomatys{display: inline-block;width: 77px;height: 20px;background: url(../img/sprite.png) no-repeat;background-position: 0 -150px;position: absolute;top: 18px;}
footer .bottom .autor:hover{opacity:0.75;}
footer .mail{margin-bottom: 20px;display: inline-block;}

/* FORMS */
#help-form{color: #fff;background-color: #ff6900;line-height: 90px;height: 90px;overflow:hidden;}
#help-form .bx-text{width: 60%;float: left;font-weight: 600;font-size: 18px;position:relative;padding-left:75px;}
#help-form .bx-text:before{content:"";display:block;width:60px;height:60px;background: url(../img/sprite.png) no-repeat;background-position:0 -90px;left: 0;
    top: 15px;position:absolute;}
#help-form .bx-btn{width: 40%;float: right;}
#help-form .orange-brn{    float: right;
    padding: 0 30px;
    border: 1px solid #fff;
    height: 50px;
    line-height: 50px;
    margin: 20px 0;border-radius:4px;font-weight:500;}
#help-form .orange-brn:hover{cursor:pointer;background: #fff;color:#ff6900;}

html.non-scroll {overflow: hidden !important; margin-right: 17px !important;}
#overlay_modal {display: none; width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: #002f40;z-index: 999;opacity: 0.85;}
#modals {display: none; position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 999999999999; overflow: auto; -webkit-transform: translateZ(0px); -webkit-overflow-scrolling: touch;}
[id^="modal_"], [id^="modal-"] {display: none; margin: auto; position: absolute; left: 0; right: 0; z-index: 1005; padding: 8px;}
[id^="modal_"] .content, [id^="modal-"] .content {width: 100%; height: 100%;}

#modal_callback_form, #modal_callback_form2{width: 391px; height: 440px; top: 0; bottom: 0;}
#modal_callback_form form , #modal_callback_form2 form{padding: 45px 35px;}
#modals  form {background: #fff;}
#modals form strong {display: block; font: 700 21px/21px Proxima; color: #1e1e1e; text-align: center; text-transform: uppercase; margin-bottom: 20px;}
#modals form b {display: block; font: 700 18px/22px Proxima; color: #1e1e1e; text-align: center; text-transform: uppercase; margin-bottom: -14px;}
#modals .time {display: block; font: 18px/22px Proxima; color: #1e1e1e; padding-left: 23px; position: relative;}
#modals .time:before {content:''; display: block; width: 14px; height: 14px;position: absolute; left: 2px; top: 3px;}
#modals input[type="text"],#modals input[type="email"],#modals input[type="tel"],#modals textarea[name="client_message"],#modals textarea{display: block; width: 100%; background: #fff url(/img/form_icons.png) -9999px 0 no-repeat; font: 18px/22px Proxima; padding: 14px 14px 14px 43px; border: 1px solid #e0e0e0; border-radius: 4px; margin-bottom: 6px; position: relative;}
#modals input[name="client_name"] {background-position: 16px 17px;}
#modals input[name="client_name"].error {background-position: 16px -223px;}
#modals input[name="client_phone"] {background-position: 16px -42px;}
#modals input[name="client_phone"].error {background-position: 16px -282px;}
#modals input[name="client_mail"] {background-position: 16px -110px;}
#modals input[name="client_mail"].error {background-position: 16px -350px;}
#modals textarea[name="client_message"] {height: 100px; background-position: 16px -110px;}
#modals textarea[name="client_message"].error {background-position: 16px -350px;}
#modals input[type="submit"] {width: 100%; height: 45px;background: #2e9cf7!important;font-size: 18px;font-weight: bold;color: #fff;border-radius: 3px;}
#modals input:hover, textarea:hover {background: #3da7ff;box-shadow: 0 10px 40px rgba(61,167,255,0.25);}
#modals input:focus, textarea:focus {background: #3da7ff;box-shadow: 0 10px 40px rgba(61,167,255,0.25);}

#modal_callback_form_back {width: 388px;height: 147px;top: 0;bottom: 0;}
#modal_callback_form_back form{width: 372px;float: left;padding: 34px;}
#modals form{box-shadow: 0 4px 21px rgba(0,0,0,0.04),0 1px 4px rgba(0,0,0,0.21);}

.modal_close {width: 20px;height: 20px;background: url(/img/close_modal.png) 0 -23px no-repeat;position: absolute;top: 20px;right: 20px;z-index: 1010;opacity: 0.5;}
.modal_close:hover {opacity: 1;}
.modal_close:active {background-position: 0 -46px;}
#modals .content{position: relative;}
.open_modal_callback, .open_modal_buy{cursor:pointer;}

.mobi-menu,.mobi-tel{display:none;}

.works .one-news,.list-reviews .col-md-6{margin-bottom: 30px;}


/* Mobi style */
@media (min-width: 0) and (max-width: 999px){
	#nav,.phones .phone,.phones .callback{display:none;}


	header .logo{margin-left: 47px;}
	.mobi-tel, .mobi-menu{width:40px;height:40px; }
	.mobi-tel{display: block;background:url(../img/telephone.png) no-repeat;font-size: 0;margin-top: 33px;margin-right: 15px;}
.mobi-menu .ham8{margin-left: -42px;}

	.menu-button.mobi-menu{align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
  margin: 0;
  overflow: hidden;
  position: absolute;
  width: 80px;}
.ham {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 400ms;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.hamRotate.active {
  transform: rotate(45deg);
}
.hamRotate180.active {
  transform: rotate(180deg);
}
.line {
  fill:none;
  transition: stroke-dasharray 400ms, stroke-dashoffset 400ms;
  stroke:#000;
  stroke-width:5.5;
  stroke-linecap:round;
}
.ham1 .top {
  stroke-dasharray: 40 139;
}
.ham1 .bottom {
  stroke-dasharray: 40 180;
}
.ham1.active .top {
  stroke-dashoffset: -98px;
}
.ham1.active .bottom {
  stroke-dashoffset: -138px;
}
.ham2 .top {
  stroke-dasharray: 40 121;
}
.ham2 .bottom {
  stroke-dasharray: 40 121;
}
.ham2.active .top {
  stroke-dashoffset: -102px;
}
.ham2.active .bottom {
  stroke-dashoffset: -102px;
}
.ham3 .top {
  stroke-dasharray: 40 130;
}
.ham3 .middle {
  stroke-dasharray: 40 140;
}
.ham3 .bottom {
  stroke-dasharray: 40 205;
}
.ham3.active .top {
  stroke-dasharray: 75 130;
  stroke-dashoffset: -63px;
}
.ham3.active .middle {
  stroke-dashoffset: -102px;
}
.ham3.active .bottom {
  stroke-dasharray: 110 205;
  stroke-dashoffset: -86px;
}
.ham4 .top {
  stroke-dasharray: 40 121;
}
.ham4 .bottom {
  stroke-dasharray: 40 121;
}
.ham4.active .top {
  stroke-dashoffset: -68px;
}
.ham4.active .bottom {
  stroke-dashoffset: -68px;
}
.ham5 .top {
  stroke-dasharray: 40 82;
}
.ham5 .bottom {
  stroke-dasharray: 40 82;
}
.ham5.active .top {
  stroke-dasharray: 14 82;
  stroke-dashoffset: -72px;
}
.ham5.active .bottom {
  stroke-dasharray: 14 82;
  stroke-dashoffset: -72px;
}
.ham6 .top {
  stroke-dasharray: 40 172;
}
.ham6 .middle {
  stroke-dasharray: 40 111;
}
.ham6 .bottom {
  stroke-dasharray: 40 172;
}
.ham6.active .top {
  stroke-dashoffset: -132px;
}
.ham6.active .middle {
  stroke-dashoffset: -71px;
}
.ham6.active .bottom {
  stroke-dashoffset: -132px;
}
.ham7 .top {
  stroke-dasharray: 40 82;
}
.ham7 .middle {
  stroke-dasharray: 40 111;
}
.ham7 .bottom {
  stroke-dasharray: 40 161;
}
.ham7.active .top {
  stroke-dasharray: 17 82;
  stroke-dashoffset: -62px;
}
.ham7.active .middle {
  stroke-dashoffset: 23px;
}
.ham7.active .bottom {
  stroke-dashoffset: -83px;
}
.ham8 .top {
  stroke-dasharray: 40 160;
}
.ham8 .middle {
  stroke-dasharray: 40 142;
  transform-origin: 50%;
  transition: transform 400ms;
}
.ham8 .bottom {
  stroke-dasharray: 40 85;
  transform-origin: 50%;
  transition: transform 400ms, stroke-dashoffset 400ms;
}
.ham8.active .top {
  stroke-dashoffset: -64px;
}
.ham8.active .middle {
  //stroke-dashoffset: -20px;
  transform: rotate(90deg);
}
.ham8.active .bottom {
  stroke-dashoffset: -64px;
}
.col-five{width:100%;flex: 100%;max-width: 100%;}

.review-img,#help-form .bx-text,.copy a{display: none;}
	.review-text{width:100%;}
.review-text .more{position: static;margin-bottom: 30px;margin-top: -10px;}

	#help-form .bx-btn{width: 100%;}
	#help-form .orange-brn{    float: left;}

footer .bottom{    margin-top: 30px;    white-space: nowrap;}


.floating-menu {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 9999;
}

.main-float-btn {
  width: 60px;
  height: 60px;
  background-color: #25D366;
  color: white;
  font-size: 32px;
  border: none;
  border-radius: 50%;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  cursor: pointer;
  transition: background 0.3s;
}

.main-float-btn:hover {
  background-color: #128C7E;
}

.sub-btns {
  display: none;
  flex-direction: column;
  align-items: flex-end;
  margin-bottom: 10px;
}

.sub-btn {
  margin-top: 10px;
  padding: 10px 16px;
  border-radius: 8px;
  color: white;
  text-decoration: none;
  font-size: 14px;
  transition: background 0.3s;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.sub-btn.whatsapp {
  background-color: #25D366;
}

.sub-btn.phone {
  background-color: #007bff;
}

.sub-btn.telegram {
  background-color: #0088cc;
}

.sub-btn:hover {
  filter: brightness(1.1);
}

